<template>
  <div class="sky_main_box">
    <div class="title">
      <span>自动排产  /  <span style="color:#3384dd;">参数设置</span></span>
    </div>
    <div class="sky-automatic-box">
      <div class="boxTitle">
        <div class="box_back">
          <i class="el-icon-arrow-left" @click="goBack"></i>
          <span class="font" @click="goBack">返回</span>
        </div>
        <span class="text">参数设置</span>
      </div>
      <div class="sky-set-content">
        <div class="sky-set-menu">
          <ul class="nav-set-param">
            <li class="header">生产排产参数</li>
            <li @click="chooseLis(1)" :class="chooseLiIndex == 1?'chooseLi':''">产线产能</li>
            <li @click="chooseLis(2)" :class="chooseLiIndex == 2?'chooseLi':''">安全库存</li>
            <li @click="chooseLis(3)" :class="chooseLiIndex == 3?'chooseLi':''">假期和特殊工作日</li>
            <!--<router-link to="/set_advance" tag="li" class="lis">提前期</router-link>-->
            <li class="header">采购订单参数</li>
            <li @click="chooseLis(4)" :class="chooseLiIndex == 4?'chooseLi':''">供应商信息维护</li>
            <!--<router-link to="/set_purchase" tag="li" class="lis">提前期</router-link>-->
          </ul>
        </div>
        <div class="sky-set-tab">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
 export default{
   data() {
     return {
       chooseLiIndex: 1,
     };
   },
   created(){
   },
   mounted(){

   },
   methods: {
     ...mapActions(['upstate']),
     //返回
     goBack(){
       this.$router.push('/index/scheduling')
     },
     //选择选项卡
     chooseLis(index){
       let self = this
       self.chooseLiIndex = index
       if (self.chooseLiIndex == 1){
         self.$router.push('/index/setParam/')
       }else if (self.chooseLiIndex == 2){
         self.$router.push('/index/setParam/stock')
       }else if (self.chooseLiIndex == 3){
         self.$router.push('/index/setParam/vacation')
       }else if (self.chooseLiIndex == 4){
         self.$router.push('/index/setParam/maintain')
       }
     },
   },
 }
</script>
<style lang="less">
  .sky_main_box{
    display: flex;
    flex-direction: column;
    padding: 0 62px;
    box-sizing: border-box;
    height: 100%;
    .title{
      height: 63px;
      line-height: 63px;
      font-size: 14px;
      color: #666666;
    }
    .sky-automatic-box{
      display: flex;
      flex-direction: column;
      height: 100%;
      .boxTitle{
        display: flex;
        flex-direction: column;
        background: #fff;
        font-size: 24px;
        padding: 18px 36px;
        border: 1px solid #e5e5e5;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .box_back{
          display: flex;
          flex-direction: row;
          .el-icon-arrow-left{
            cursor: pointer;
          }
          .font{
            font-size: 18px;
            color: #222222;
            cursor: pointer;
          }
        }
        .text{
          font-size: 24px;
          color: #3b3b3b;
          margin-top: 25px;
          font-weight: 600;
        }
      }
      .sky-set-content{
        display: flex;
        flex-direction: row;
        height: 100%;
        .sky-set-menu{
          width: 19%;
          height: 100%;
          border: 1px solid #e5e5e5;
          border-top: none;
          .nav-set-param{
            margin: 0;
            padding: 0;
            li{
              list-style-type:none;
              border-bottom: 1px solid #e5e5e5;
              padding: 0 23px;
              box-sizing: border-box;
              height: 60px;
              line-height: 60px;
              font-size: 14px;
              color: #222222;
              background: #fff;
              cursor: pointer;
            }
            .header{
              background: #fafafa;
              font-size: 16px;
              color: #666666;
              cursor: default;
            }
            .chooseLi{
              background: #f4faff;
              color: #3384dd;
              position: relative;
            }
            .chooseLi:after{
              display: block;
              content: '';
              position: absolute;
              right: 0;
              top: 0;
              height: 60px;
              width: 3px;
              background: #0f76c8;
            }
          }
        }
        .sky-set-tab{
          width: 80%;
        }
      }
    }
  }
</style>
